<template>
    <div class="admin-card">
      <!-- 信息特快 -->
      <div class="admin-card1">

      <el-card class="box-card" shadow="hover">
          <div>
            <img src="@/assets/img/01.jpg" width="125" height="130" style="float:left">
          </div>
          <div v-for="(o,index) in title1" :key="index" class="text item">
            <img v-bind:src="o.src" style="cursor:pointer;margin-top: 7px" @click="linkTo(o.linkTo)">
          </div>
        </el-card>

      <!-- 雨量监测 -->
        <el-card class="box-card" shadow="hover">
          <div>
            <img src="@/assets/img/02.jpg" width="125" height="130" style="float:left">
          </div>
          <a :href=rainfallUrl><img src="@/assets/img/link2-1.jpg" style="cursor:pointer;margin-top: 7px" ></a>
          <a :href=rainfallMonitor><img src="@/assets/img/link2-2.jpg" style="cursor:pointer;margin-top: 7px;padding-top:15px" ></a>

          <!-- <img v-bind:src="o.src" style="cursor:pointer;margin-top: 7px" @click="linkTo(o.linkTo)"> -->
          <div v-for="(o,index) in title2" :key="index" class="text item">
            <img v-bind:src="o.src" style="cursor:pointer;margin-top: 7px;padding-top:15px" @click="linkTo(o.linkTo)">
          </div>
        </el-card>

      <!-- 天气预报 -->
        <el-card class="box-card" shadow="hover">
          <div>
            <img src="@/assets/img/03.jpg" width="125" height="130" style="float:left">
          </div>
          <a :href=weatherOfWholrRoudUrl><img src="@/assets/img/link2-4.jpg" style="cursor:pointer;margin-top: 7px;" ></a>
          <a :href=precipitationUrl><img src="@/assets/img/link3-2.jpg" style="cursor:pointer;margin-top: 7px;padding-top:15px" ></a>
          <a :href=typhoonImformation><img src="@/assets/img/link3-3.jpg" style="cursor:pointer;margin-top: 7px;padding-top:15px" ></a>
          <!-- <div v-for="(o,index) in title3" :key="index" class="text item">
            <img v-bind:src="o.src" style="cursor:pointer;margin-top: 7px" @click="linkTo(o.linkTo)">
          </div> -->
        </el-card>
      </div>

      <div class = "admin-card2">
      <!-- 防洪准备 -->
        <el-card class="box-card" shadow="hover">
          <div>
            <img src="@/assets/img/04.jpg" width="125" height="130" style="float:left">
          </div>
          <div v-for="(o,index) in title4" :key="index" class="text item">
            <img v-bind:src="o.src" style="cursor:pointer" @click="linkTo(o.linkTo)">
          </div>
        </el-card>

      <!-- 日常信息 -->
        <el-card class="box-card" shadow="hover">
          <div>
            <img src="@/assets/img/05.jpg" width="125" height="130" style="float:left">
          </div>
          <div v-for="(o,index) in title5" :key="index" class="text item">
            <img v-bind:src="o.src" style="cursor:pointer" @click="linkTo(o.linkTo)">
          </div>
        </el-card>

      <!-- 防洪科技 -->
        <el-card class="box-card" shadow="hover">
          <div>
            <img src="@/assets/img/06.jpg" width="125" height="130" style="float:left">
          </div>
          <div v-for="(o,index) in title6" :key="index" class="text item">
            <img v-bind:src="o.src" style="cursor:pointer" @click="linkTo(o.linkTo)">
          </div>
        </el-card>
      </div>
    </div>
</template>
<script>
// import UrlConfig from '../../url/UrlConfig'
export default {
    name:"ContentTwoConponent",
    data(){
    return{
      rainfallUrl:VUE_APP_URL.REAL_TIME_RAINFALL_URL,
      rainfallMonitor:VUE_APP_URL.RAINFALL_MONITORING_URL,
      weatherOfWholrRoudUrl:VUE_APP_URL.WEATHER_OF_THE_WHOLE_ROAD_URL,
      precipitationUrl:VUE_APP_URL.PRECIPITAION_URL,
      typhoonImformation:VUE_APP_URL.TYPHOON_IMFORMATION_URL,
        title1:[
        {'title':"防洪日简报",'src':require("@/assets/img/link1-1.jpg"),linkTo:"/fhrbjb"},
        {'title':"水害影响表",'src':require("@/assets/img/link1-2.jpg"),linkTo:"/shyxb"},
        {'title':"单元化管理",'src':require("@/assets/img/link1-4.jpg"),linkTo:"/dyhgl"}
      ],
      title2:[
        // {title:"实时降雨",src:require("@/assets/img/link2-1.jpg"),linkTo:"http://10.128.86.125:8080/ssjy"},
        // {title:"最新警报",src:require("@/assets/img/link2-2.jpg"),linkTo:"http://10.128.86.125/rainfallweb/main.aspx"},
        {title:"最新水情",src:require("@/assets/img/link2-3.jpg"),linkTo:"/zxsq"}
      ],
      title3:[
        // {title:"全路天气",src:require("@/assets/img/link2-4.jpg"),linkTo:"http://10.1.4.39/xxlr/ywxt/weather1/qixiang.asp"},
        // {title:"旬降水量",src:require("@/assets/img/link3-2.jpg"),linkTo:"http://10.1.69.164:7001/raininfo/forecast_tendays/Forecast_tendaysController.jpf"},
        // {title:"台风信息",src:require("@/assets/img/link3-3.jpg"),linkTo:"http://10.1.69.164:7001/raininfo/typhoo/TyphooController.jpf"}
      ],
      title4:[
        {title:"防洪预案",src:require("@/assets/img/link4-1.jpg"),linkTo:"/fhya"},
        {title:"防洪地点",src:require("@/assets/img/link4-2.jpg"),linkTo:"/fhdd"},
        {title:"隐患排查",src:require("@/assets/img/link4-4.jpg"),linkTo:"/yhpc"},
        {title:"水库水系",src:require("@/assets/img/link4-3.jpg"),linkTo:"/sksx"}
      ],
      title5:[
        {title:"雨量警戒值",src:require("@/assets/img/link5-1.jpg"),linkTo:"/yljjz"},
        {title:"水害分析",src:require("@/assets/img/link5-2.jpg"),linkTo:"/shfx"},
        {title:"防洪备料",src:require("@/assets/img/link5-3.jpg"),linkTo:"/fhbl"},
        {title:"领导讲话",src:require("@/assets/img/link5-4.jpg"),linkTo:"/ldjh"}
      ],
      title6:[
        {title:"防洪法规",src:require("@/assets/img/link6-1.jpg"),linkTo:"/fhfg"},
        {title:"防洪文件",src:require("@/assets/img/link6-2.jpg"),linkTo:"/fhwj"},
        {title:"防洪科技",src:require("@/assets/img/link6-3.jpg"),linkTo:"/fhkj"},
        {title:"典型案例",src:require("@/assets/img/link6-4.jpg"),linkTo:"/dxal"},
      ],
    }
    },
  methods: {
    linkTo(to) {
      console.log("转到个人界面");
      this.$router.push(to);
    }
  }
}
</script>
<style>
  .admin-card1{
    /*
    加上display:flex可以显示在一行，
    加上flex-wrap: wrap;可以进行换行显示比较好看
    */
    display: flex;
    flex-wrap: wrap;
    /* 这个属性可以加大卡片之间的间隔距离 */
    justify-content: space-around;
    margin-top: 5px;
    justify-content:space-between;
    width: 950px;

  }
  .admin-card2{
  /*
  加上display:flex可以显示在一行，
  加上flex-wrap: wrap;可以进行换行显示比较好看
  */
  display: flex;
  flex-wrap: wrap;
  /* 这个属性可以加大卡片之间的间隔距离 */
  justify-content: space-around;
  margin-top: 5px;
  justify-content:space-between;
    width: 950px;
}
.box-card {
  flex: 1;
  width: 300px;
  margin: 10px;
  height:185px;
}
  /* el-card背景色 */
.el-card__body {
  padding: 20px;
  background-color: powderblue;
  height:147px;
}
/*.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}*/
</style>
